<!--
 *
 * 　　┏┓　　　┏┓+ +
 * 　┏┛┻━━━┛┻┓ + +
 * 　┃　　　　　　　┃
 * 　┃　　　━　　　┃ ++ + + +
 *  ████━████ ┃+
 * 　┃　　　　　　　┃ +
 * 　┃　　　┻　　　┃
 * 　┃　　　　　　　┃ + +
 * 　┗━┓　　　┏━┛
 * 　　　┃　　　┃
 * 　　　┃　　　┃ + + + +
 * 　　　┃　　　┃
 * 　　　┃　　　┃ +  神兽保佑
 * 　　　┃　　　┃    代码无bug
 * 　　　┃　　　┃　　+
 * 　　　┃　 　　┗━━━┓ + +
 * 　　　┃ 　　　　　　　┣┓
 * 　　　┃ 　　　　　　　┏┛
 * 　　　┗┓┓┏━┳┓┏┛ + + + +
 * 　　　　┃┫┫　┃┫┫
 * 　　　　┗┻┛　┗┻┛+ + + +
 *
 *
 * @Descripttion:
 * @version:
 * @Date: 2022-03-16 13:46:18
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-03-23 11:46:30
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
 -->
<template>
  <drawer-frame
    :title="`${user.name ? '编辑' : '新建'}成员`"
    @close="$emit('close')"
    @submit="handleSubmit"
  >
    <el-form
      ref="form"
      label-position="right"
      label-width="100px"
      :model="model"
      :rules="rules"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="model.name" placeholder="名称"></el-input>
      </el-form-item>

      <el-form-item label="手机号" prop="number">
        <el-input v-model="model.number" placeholder="手机号"></el-input>
      </el-form-item>

      <el-form-item label="邮箱" prop="email">
        <el-input v-model="model.email" placeholder="邮箱"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="model.password"
          show-password
          placeholder="密码"
        ></el-input>
        <el-tag class="password-tip">
          <div class="inner">
            <i class="el-icon-warning"></i>
            <div>密码要求至少8位数，大写、小写字母、数字、特殊符号的组合</div>
          </div>
        </el-tag>
      </el-form-item>
      <el-form-item label="角色" prop="roleId">
        <el-select
          v-model="model.roleId"
          style="width: 100%"
          placeholder="角色"
        ></el-select>
      </el-form-item>
    </el-form>
  </drawer-frame>
</template>
<script>
export default {
  props: {
    user: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      model: {
        email: '',
        name: '',
        number: '',
        roleId: '',
        password: '',
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur',
          },
        ],

        number: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur',
          },
        ],
        email: [
          {
            required: true,
            message: '请输入邮箱',
            trigger: 'blur',
          },
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
          },
        ],
        roleId: [
          {
            required: true,
            message: '请选择角色',
            trigger: 'change',
          },
        ],
      },
    }
  },
  created() {
    if (this.user.name) {
      this.model = {
        ...this.user,
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate()
    },
  },
}
</script>
<style lang="scss" scoped>
.password-tip {
  display: block;
  height: auto;
  padding-top: 6px;
  padding-bottom: 6px;
  margin-top: 8px;
  .inner {
    display: flex;
    align-items: center;

    .el-icon-warning {
      margin-right: 10px;
    }
    > div {
      flex: 1;
      white-space: normal;
      line-height: 1.8;
    }
  }
}
</style>
